<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/global.css">

    <!-- 引入样式 -->
    <link rel="stylesheet" href="./assets/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <el-table :data="tableData" v-loadmore="loadmore" border style="width: 100%" height="200">
            <el-table-column prop="id" label="ID" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名">
            </el-table-column>
            <el-table-column prop="amount1" sortable label="数值 1">
            </el-table-column>
            <el-table-column prop="amount2" sortable label="数值 2">
            </el-table-column>
            <el-table-column prop="amount3" sortable label="数值 3">
            </el-table-column>
        </el-table>

    </div>
</body>
<!-- import Vue before Element -->
<script src="./assets/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="./assets/element-ui/lib/index.js"></script>

<script>

    new Vue({
        el: '#app',
        data: function () {
            return {
                total: 100,
                tableData: [{
                    id: '12987122',
                    name: '王小虎',
                    amount1: '234',
                    amount2: '3.2',
                    amount3: 10
                }, {
                    id: '12987123',
                    name: '王小虎',
                    amount1: '165',
                    amount2: '4.43',
                    amount3: 12
                }, {
                    id: '12987124',
                    name: '王小丫',
                    amount1: '324',
                    amount2: '1.9',
                    amount3: 9
                }, {
                    id: '12987125',
                    name: '王小丫',
                    amount1: '621',
                    amount2: '2.2',
                    amount3: 17
                }, {
                    id: '12987126',
                    name: '王小丫',
                    amount1: '539',
                    amount2: '4.1',
                    amount3: 15
                }]
            }
        },
        mounted() {
        },
        methods: {
            async loadmore() {
                if (this.tableData.length >= this.total) return;
                if (this.loading) return;
                this.loading = true;
                await Promise.resolve((resolve) => setTimeout(resolve, 2000))
                this.tableData = this.tableData.concat([{
                    id: '12987122',
                    name: '王小虎',
                    amount1: '234',
                    amount2: '3.2',
                    amount3: 10
                }, {
                    id: '12987123',
                    name: '王小虎',
                    amount1: '165',
                    amount2: '4.43',
                    amount3: 12
                }, {
                    id: '12987124',
                    name: '王小丫',
                    amount1: '324',
                    amount2: '1.9',
                    amount3: 9
                }, {
                    id: '12987125',
                    name: '王小丫',
                    amount1: '621',
                    amount2: '2.2',
                    amount3: 17
                }, {
                    id: '12987126',
                    name: '王小丫',
                    amount1: '539',
                    amount2: '4.1',
                    amount3: 15
                }])
                this.loading = false;
            }
        },
        directives: {
            loadmore: {
                bind(el, binding) {
                    const selectWrap = el.querySelector(".el-table__body-wrapper");
                    selectWrap.addEventListener("scroll", function () {
                        const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight;
                        if (scrollDistance <= 0.5) {
                            binding.value()
                        }
                    });
                },
            },
        },
    })


</script>

</html>